<template>
  <div class="app-container ai-container">
    <!-- GPT风格的主界面 -->
    <div class="ai-main-container">
      <div class="ai-header">
        <div class="ai-title">
          <i class="el-icon-cpu"></i>
          <span>AI智能测评中心</span>
        </div>
        <div class="ai-subtitle">基于先进AI模型，为学生提供科学、个性化的高考志愿推荐</div>
      </div>

      <!-- 中央搜索区域 -->
      <div class="ai-search-area">
        <el-form :model="queryForm" ref="queryForm" class="ai-form">
          <!-- 学生学号输入 -->
          <el-form-item class="student-input-item">
            <div class="input-header">
              <i class="el-icon-user"></i>
              <span>输入学号开始智能测评</span>
            </div>
            <el-input 
              v-model="queryForm.studentNo" 
              placeholder="请输入学生学号..."
              prefix-icon="el-icon-user"
              clearable
              class="student-input"
            >
              <el-button 
                slot="append" 
                type="primary" 
                icon="el-icon-search" 
                :loading="loading"
                @click="handleQuery"
              >开始分析</el-button>
            </el-input>
          </el-form-item>

          <!-- AI分析参数 -->
          <div class="ai-analysis-params">
            <div class="params-header">
              <i class="el-icon-setting"></i>
              <span>AI分析参数</span>
            </div>
            
            <div class="params-row">
              <div class="param-label">分析维度</div>
              <div class="param-value">
                <el-select
                  v-model="queryForm.dimensions"
                  multiple
                  collapse-tags
                  placeholder="请选择分析维度"
                  style="width: 100%; max-width: 600px"
                >
                  <el-option
                    v-for="item in dimensionOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                    <div class="dimension-option">
                      <span>{{ item.name }}</span>
                      <el-tooltip :content="item.description" placement="right">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                  </el-option>
                </el-select>
              </div>
            </div>
            
            <div class="params-row depth-row">
              <div class="param-label">分析深度</div>
              <div class="param-value">
                <div class="depth-control-container">
                  <div class="depth-labels">
                    <span
                      v-for="level in 5"
                      :key="level"
                      :class="['depth-label', { active: queryForm.depth === level }]"
                      @click="setDepthLevel(level)"
                    >
                      {{ getDepthLabel(level) }}
                    </span>
                  </div>
                  <el-slider
                    v-model="queryForm.depth"
                    :min="1"
                    :max="5"
                    :step="1"
                    :show-stops="true"
                    :show-tooltip="false" 
                    style="margin: 0 5px;"
                  ></el-slider>
                  <div class="depth-range" style="display: none;">
                    <span>浅</span>
                    <span>深</span>
                  </div>
                </div>
                <!-- 隐藏旧的input容器 -->
                <div class="depth-input-container" style="display: none;">
                  <el-input-number
                    v-model="queryForm.depth"
                    :min="1"
                    :max="5"
                    :step="1"
                    controls-position="right"
                    @change="handleDepthChange"
                  ></el-input-number>
                  <div class="depth-text">
                    <el-tag size="small" type="primary">{{ getDepthLabel(queryForm.depth) }}</el-tag>
                  </div>
                  <div class="depth-desc">（1级：浅分析，5级：深分析）</div>
                </div>
              </div>
            </div>
            
            <div class="params-row">
              <div class="param-label">推荐数量</div>
              <div class="param-value">
                <el-input-number
                  v-model="queryForm.count"
                  :min="1"
                  :max="10"
                  :step="1"
                  controls-position="right"
                ></el-input-number>
              </div>
            </div>
            
            <div class="action-buttons">
              <el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleQuery">开始分析</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </div>
          </div>
        </el-form>
      </div>

      <!-- 结果展示区域 -->
      <div v-if="resultVisible" class="ai-result-container" v-loading="loading">
        <!-- 学生信息 -->
        <div class="ai-student-info">
          <div class="student-avatar">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="student-details">
            <h3>{{ studentInfo.studentName }}</h3>
            <div class="student-tags">
              <el-tag size="mini">学号: {{ studentInfo.studentNo }}</el-tag>
              <el-tag size="mini" type="success">{{ studentInfo.grade }}年级</el-tag>
              <el-tag size="mini" type="primary">{{ studentInfo.score }}分</el-tag>
              <el-tag size="mini" type="warning">排名 {{ studentInfo.rank }}</el-tag>
            </div>
          </div>
          <div class="action-buttons">
            <el-button type="text" icon="el-icon-share" @click="handleShare">分享</el-button>
            <el-button type="text" icon="el-icon-download" @click="handleExport">导出PDF</el-button>
          </div>
        </div>

        <!-- 分析摘要 -->
        <div class="ai-summary-card">
          <div class="card-title"><i class="el-icon-s-opportunity"></i> 评估摘要</div>
          <div class="card-content">{{ resultData.summary }}</div>
        </div>

        <!-- 图表分析 -->
        <div class="ai-charts-section">
          <div class="chart-box">
            <div class="chart-title">匹配度分析</div>
            <div id="radarChart" class="chart-canvas"></div>
          </div>
          <div class="chart-box">
            <div class="chart-title">院校排行</div>
            <div id="barChart" class="chart-canvas"></div>
          </div>
        </div>

        <!-- 推荐院校专业列表 -->
        <div class="ai-recommendation-section">
          <div class="section-header">
            <i class="el-icon-medal"></i> 院校专业推荐
          </div>
          <el-table
            :data="resultData.recommendations || []"
            style="width: 100%"
            border
            stripe
            :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            class="recommendation-table"
          >
            <el-table-column label="排名" width="80" align="center">
              <template slot-scope="scope">
                <el-tag :type="getTagType(scope.$index)">{{ scope.$index + 1 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="collegeName" label="院校名称" width="180"></el-table-column>
            <el-table-column prop="majorName" label="专业名称" width="180"></el-table-column>
            <el-table-column label="匹配度" width="180">
              <template slot-scope="scope">
                <el-progress 
                  :percentage="Math.round(scope.row.matchScore)" 
                  :color="getScoreColor(scope.row.matchScore)"
                  :format="p => p + '%'"
                ></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="特点标签">
              <template slot-scope="scope">
                <el-tag 
                  v-for="(tag, index) in scope.row.tags" 
                  :key="index"
                  :type="getTagType(index)"
                  size="mini"
                  style="margin-right: 5px"
                >
                  {{ tag }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 专家建议 -->
        <div class="ai-advice-section">
          <div class="advice-header">
            <i class="el-icon-chat-dot-square"></i> AI专家建议
          </div>
          <div class="advice-content">
            {{ resultData.expertAdvice }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getAnalysisDimensions, aiEvaluate, getStudentProfile } from "@/api/entrance/evaluation";

export default {
  name: "AIEvaluation",
  data() {
    return {
      // 查询参数
      queryForm: {
        studentNo: '',
        dimensions: ['interest', 'career'],
        count: 5,
        depth: 3
      },
      
      // 分析维度选项
      dimensionOptions: [],
      
      // 学生信息
      studentInfo: {},
      
      // 分析结果
      resultData: {},
      
      // 页面状态
      loading: false,
      resultVisible: false,
      
      // 图表实例
      radarChart: null,
      barChart: null
    };
  },
  created() {
    this.getDimensions();
  },
  methods: {
    // 获取分析维度选项
    getDimensions() {
      getAnalysisDimensions().then(response => {
        this.dimensionOptions = response.data;
      });
    },
    
    // 执行查询
    handleQuery() {
      if (!this.queryForm.studentNo) {
        this.$message.warning('请输入学生学号');
        return;
      }
      
      this.loading = true;
      this.resultVisible = true;
      
      // 获取学生信息
      getStudentProfile(this.queryForm.studentNo).then(response => {
        this.studentInfo = response.data;
        
        // 执行AI分析
        aiEvaluate(this.queryForm).then(response => {
          this.resultData = response.data;
          this.loading = false;
          
          // 初始化图表
          this.$nextTick(() => {
            this.initCharts();
          });
        }).catch(() => {
          this.loading = false;
        });
      }).catch(() => {
        this.loading = false;
      });
    },
    
    // 重置查询
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.resultVisible = false;
      this.resultData = {};
      
      // 销毁图表
      if(this.radarChart) {
        this.radarChart.dispose();
        this.radarChart = null;
      }
      if(this.barChart) {
        this.barChart.dispose();
        this.barChart = null;
      }
    },
    
    // 初始化图表
    initCharts() {
      this.initRadarChart();
      this.initBarChart();
      
      // 监听窗口大小变化，重绘图表
      window.addEventListener('resize', this.resizeCharts);
    },
    
    // 重绘图表
    resizeCharts() {
      if(this.radarChart) {
        this.radarChart.resize();
      }
      if(this.barChart) {
        this.barChart.resize();
      }
    },
    
    // 初始化雷达图
    initRadarChart() {
      const chartDom = document.getElementById('radarChart');
      if(!chartDom) return;
      
      this.radarChart = echarts.init(chartDom);
      
      // 处理雷达图数据
      const dimensions = [];
      const data = [];
      
      if(this.resultData.matchingScores) {
        for(const [key, scores] of Object.entries(this.resultData.matchingScores)) {
          dimensions.push({ name: key, max: 100 });
          if(scores && scores.length > 0) {
            data.push(scores[0]);
          }
        }
      }
      
      const option = {
        title: {
          text: '首选推荐匹配度分析',
          left: 'center',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {},
        radar: {
          indicator: dimensions.length > 0 ? dimensions : [
            { name: '学科兴趣', max: 100 },
            { name: '就业前景', max: 100 },
            { name: '院校环境', max: 100 },
            { name: '专业潜力', max: 100 },
            { name: '性格匹配', max: 100 }
          ]
        },
        series: [{
          name: '匹配度',
          type: 'radar',
          data: [{
            value: data.length > 0 ? data : [80, 85, 70, 75, 90],
            name: '匹配度',
            areaStyle: {
              color: 'rgba(64, 158, 255, 0.6)'
            }
          }]
        }]
      };
      
      this.radarChart.setOption(option);
    },
    
    // 初始化柱状图
    initBarChart() {
      const chartDom = document.getElementById('barChart');
      if(!chartDom) return;
      
      this.barChart = echarts.init(chartDom);
      
      // 处理柱状图数据
      const colleges = [];
      const scores = [];
      
      if(this.resultData.recommendations) {
        this.resultData.recommendations.slice(0, 5).forEach(item => {
          colleges.push(item.collegeName);
          scores.push(Math.round(item.matchScore));
        });
      }
      
      const option = {
        title: {
          text: '推荐院校匹配度排行',
          left: 'center',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          max: 100
        },
        yAxis: {
          type: 'category',
          data: colleges.length > 0 ? colleges.reverse() : [
            '清华大学', '北京大学', '浙江大学', '复旦大学', '上海交通大学'
          ].reverse(),
          axisLabel: {
            formatter: function(value) {
              if(value.length > 6) {
                return value.substring(0, 6) + '...';
              }
              return value;
            }
          }
        },
        series: [{
          name: '匹配度',
          type: 'bar',
          data: scores.length > 0 ? scores.reverse() : [95, 88, 83, 76, 72].reverse(),
          label: {
            show: true,
            position: 'right',
            formatter: '{c}%'
          },
          itemStyle: {
            color: params => {
              const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
              return colors[params.dataIndex % colors.length];
            }
          }
        }]
      };
      
      this.barChart.setOption(option);
    },
    
    // 获取标签类型
    getTagType(index) {
      const types = ['', 'success', 'warning', 'danger', 'info'];
      return types[index % types.length];
    },
    
    // 获取分数颜色
    getScoreColor(score) {
      if(score >= 90) return '#67C23A';
      if(score >= 80) return '#409EFF';
      if(score >= 70) return '#E6A23C';
      return '#F56C6C';
    },
    
    // 分享功能
    handleShare() {
      this.$message({
        message: '分享功能开发中，敬请期待',
        type: 'info'
      });
    },
    
    // 导出PDF
    handleExport() {
      this.$message({
        message: '导出功能开发中，敬请期待',
        type: 'info'
      });
    },
    
    // 获取深度图标
    getDepthIcon(level) {
      const icons = [
        'el-icon-discount',   // 1级 - 简单
        'el-icon-data-line',  // 2级 - 基础
        'el-icon-data-analysis', // 3级 - 中等
        'el-icon-monitor',    // 4级 - 深入
        'el-icon-cpu'         // 5级 - 专业
      ];
      return icons[level-1];
    },
    
    // 获取深度标签
    getDepthLabel(level) {
      const labels = ['简单', '基础', '中等', '深入', '专业'];
      return labels[level-1];
    },
    
    // 设置深度级别
    setDepthLevel(level) {
      this.queryForm.depth = level;
      // 添加视觉反馈
      this.$message({
        message: `已设置分析深度为：${this.getDepthLabel(level)}`,
        type: 'success',
        duration: 1000,
        showClose: false
      });
    },
    
    // 处理深度变化
    handleDepthChange(value) {
      // 可选：添加其他处理逻辑
    }
  },
  beforeDestroy() {
    // 销毁图表，避免内存泄漏
    window.removeEventListener('resize', this.resizeCharts);
    if(this.radarChart) {
      this.radarChart.dispose();
      this.radarChart = null;
    }
    if(this.barChart) {
      this.barChart.dispose();
      this.barChart = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
  padding: 20px;
}

.ai-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.ai-main-container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-header {
  text-align: center;
  margin-bottom: 30px;
  
  .ai-title {
    font-size: 32px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    i {
      margin-right: 15px;
      font-size: 28px;
      color: #409EFF;
      background: rgba(64, 158, 255, 0.1);
      padding: 10px;
      border-radius: 12px;
    }
  }
  
  .ai-subtitle {
    color: #606266;
    font-size: 16px;
  }
}

.ai-search-area {
  background-color: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  
  .ai-form {
    width: 100%;
    
    .student-input-item {
      margin-bottom: 30px;
      
      .input-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        
        i {
          font-size: 18px;
          color: #409EFF;
          margin-right: 8px;
        }
        
        span {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }
      
      .student-input {
        width: 100%;
        .el-input__inner {
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        
        .el-button {
          height: 50px;
          padding: 0 20px;
          font-size: 16px;
        }
      }
    }
  }
  
  .ai-analysis-params {
    background-color: #f5f7fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    
    .params-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      color: #409EFF;
      font-weight: 600;
      
      i {
        margin-right: 8px;
        font-size: 16px;
      }
    }
    
    .params-row {
      display: flex;
      margin-bottom: 15px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .param-label {
        width: 80px;
        color: #606266;
        font-weight: 600;
        line-height: 32px;
      }
      
      .param-value {
        flex: 1;
      }
    }
    
    .depth-row {
      .depth-control-container {
        width: 100%;
        max-width: 450px; // 限制最大宽度，避免在宽屏上过长

        .depth-labels {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .depth-label {
            font-size: 13px;
            color: #909399;
            cursor: pointer;
            padding: 4px 10px; // 调整内边距
            border-radius: 12px;
            transition: all 0.3s;
            text-align: center; // 文字居中

            &:hover {
              color: #409EFF;
              background-color: rgba(64, 158, 255, 0.1);
            }

            &.active {
              color: #fff;
              background-color: #409EFF;
              box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
            }
          }
        }

        .depth-range {
          display: flex;
          justify-content: space-between;
          margin-top: 5px;
          padding: 0 5px; // 微调内边距
          color: #909399;
          font-size: 12px;
        }
      }
      // 明确隐藏旧的input样式
      .depth-input-container {
         display: none !important; 
      }
    }
    
    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 20px;
      
      .el-button {
        padding: 12px 25px;
        font-size: 15px;
      }
    }
  }
}

.ai-result-container {
  background-color: #fff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 35px;
  
  .ai-student-info {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 25px;
    
    .student-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: #409EFF;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      
      i {
        font-size: 34px;
        color: #fff;
      }
    }
    
    .student-details {
      flex: 1;
      
      h3 {
        margin: 0 0 12px 0;
        font-size: 20px;
        color: #303133;
      }
      
      .student-tags {
        .el-tag {
          margin-right: 10px;
          padding: 6px 10px;
        }
      }
    }
    
    .action-buttons {
      .el-button {
        margin-left: 12px;
        font-size: 15px;
      }
    }
  }
  
  .ai-summary-card {
    background-color: #f8faff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    
    .card-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #303133;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 10px;
        font-size: 20px;
        color: #409EFF;
      }
    }
    
    .card-content {
      line-height: 1.8;
      color: #606266;
      text-indent: 2em;
      font-size: 15px;
    }
  }
  
  .ai-charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    
    .chart-box {
      background-color: #fff;
      border-radius: 10px;
      border: 1px solid #ebeef5;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
      
      .chart-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        text-align: center;
        color: #303133;
      }
      
      .chart-canvas {
        height: 320px;
      }
    }
  }
  
  .ai-recommendation-section {
    .section-header {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #303133;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 10px;
        font-size: 20px;
        color: #409EFF;
      }
    }
    
    .recommendation-table {
      margin-top: 15px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    }
  }
  
  .ai-advice-section {
    background-color: #f0f9eb;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    
    .advice-header {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #67c23a;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 10px;
        font-size: 20px;
      }
    }
    
    .advice-content {
      line-height: 1.8;
      color: #606266;
      white-space: pre-line;
      font-size: 15px;
    }
  }
}

.dimension-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  i {
    color: #909399;
  }
}

@media screen and (max-width: 768px) {
  .ai-search-area {
    padding: 20px;
  }
  
  .ai-result-container {
    padding: 20px;
  }
  
  .option-row {
    flex-direction: column;
    align-items: flex-start;
    
    .option-label {
      margin-bottom: 10px;
    }
    
    .depth-option-row {
      width: 100%;
      overflow-x: auto;
      padding-bottom: 10px;
    }
  }
}

.depth-option-row {
  margin-top: 10px;
  margin-bottom: 10px;
  
  .depth-marks {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 9px;
    
    .mark-item {
      color: #909399;
      font-size: 13px;
      cursor: pointer;
      padding: 2px 4px;
      
      &:hover {
        color: #409EFF;
      }
    }
  }
  
  .depth-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    
    .depth-label {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }
  }
  
  .el-slider {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.depth-container {
  display: none;
}

.depth-selector-container {
  display: none;
}

.icon-mode {
  display: none;
}

.slider-mode {
  display: none;
}

.analysis-params {
  margin-bottom: 20px;
  background-color: #f8f9fc;
  border-radius: 8px;
  padding: 15px 20px;
  
  .param-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #409EFF;
    font-weight: 600;
    font-size: 15px;
    
    i {
      margin-right: 8px;
    }
  }
  
  .param-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .param-label {
      width: 100px;
      color: #606266;
      font-weight: 600;
    }
    
    .param-content {
      flex: 1;
      
      .dimension-select {
        width: 100%;
      }
      
      .count-input {
        width: 120px;
      }
      
      .depth-control {
        display: flex;
        align-items: center;
        
        .depth-display {
          display: flex;
          align-items: center;
          white-space: nowrap;
          
          .depth-name {
            color: #606266;
            margin-right: 10px;
            font-weight: 500;
          }
        }
      }
    }
  }
}

.analysis-depth-row {
  margin: 15px 0;
}

.analysis-depth-content {
  width: 100%;
  
  .depth-labels-container {
    width: 100%;
    max-width: 600px;
  }
  
  .depth-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    
    .depth-label {
      font-size: 13px;
      color: #909399;
      cursor: pointer;
      padding: 4px 12px;
      border-radius: 12px;
      transition: all 0.3s;
      text-align: center;
      
      &:hover {
        color: #409EFF;
        background-color: rgba(64, 158, 255, 0.1);
      }
      
      &.active {
        color: #fff;
        background-color: #409EFF;
        box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
      }
    }
  }
  
  .slider-container {
    margin: 10px 0;
    padding: 0 10px;
  }
  
  .depth-range {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding: 0 10px;
    color: #909399;
    font-size: 12px;
  }
}
</style> 